<template>
	<div class="homeD">
		<div class="bot_top">
			<div class="top_title">
				<div></div>
				<div>项目名称:</div>
			</div>
			<el-select v-model="name" class="select" placeholder="项目名称">
				<el-option label="区域一" value="shanghai"></el-option>
				<el-option label="区域二" value="beijing"></el-option>
			</el-select>
		</div>
		<div id="main" style="width: 100%;height:400px;"></div>
	</div>
</template>

<script>
// ';
var echarts = require('echarts');
export default {
	data() {
		return {
			// bg_color: styles.bg_color,
			name: ''
		};
	},
	mounted() {
		var myChart = echarts.init(document.getElementById('main'));
		// 绘制图表
		myChart.setOption({
			// title: {
			// 	text: '项目进度'
			// },

			legend: {
				data: ['整体项目进度', '实际项目进度']
			},

			//  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			// 提示框
			tooltip: {
				trigger: 'axis'
			},

			xAxis: {
				type: 'category',
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				// 设置X轴数据旋转倾斜
				axisLabel: {
					interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
				},
				// boundaryGap值为false的时候，折线第一个点在y轴上
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},

			yAxis: {
				name: '%',
				type: 'value',
				min: 0, // 设置y轴刻度的最小值
				max: 100, // 设置y轴刻度的最大值
				splitNumber: 5, // 设置y轴刻度间隔个数
				nameTextStyle: {
					color: '#000'
				},
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				},
			},

			series: [
				{
					name: '整体项目进度',
					data: [20, 32, 11, 34, 90, 30, 100],
					type: 'line'
				},

				{
					name: '实际项目进度',
					data: [25, 26, 36, 68, 78, 88, 100],
					type: 'line'
				},

			],

			color: ['#467FCF', '#76C426']
		});
	},
	methods: {}
};
</script>

<style lang="scss">
.home_right {
  .select {
    padding-left: 10px;
    width: 300px;
  }
}
</style>
<style lang="scss" scoped>
.homeD {
  padding: 0 $px_24;
}
.bot_top {
  height: 56px;
  display: flex;
  align-items: center;
}

.top_title {
  height: 56px;
  display: flex;
  align-items: center;
  font-weight: bold;

  > div:first-child {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    // background: $bg_color;
    margin-right: 5px;
  }
}
</style>
